/**
 * 功能描述: 基础按钮组样式
 * @author 赵常畅
 * @date 2022/9/20 16:02
 * @version 1.0
 */

@import "../../style/index";
@import "../Button/constant";


/* 按钮组 */
@mixin btn-group--layout {
  // 布局
  position: relative;
  display: inline-flex;
  // span中的 按钮
  > .#{$namespace}-btn, > span > .#{$namespace}-btn {
    position: relative;
  }
  // 第一个子元素按钮
  > .#{$namespace}-btn:first-child,
  > span:first-child > .#{$namespace}-btn {
    margin-left: $--btn-group-first-child-margin;
  }
  // 并列按钮组
  > .#{$namespace}-btn-group {
    float: left;
  }
  // 最后一个按钮
  > .#{$namespace}-btn-group:first-child:not(:last-child) > .#{$namespace}-btn:last-child {
    padding-right: $--btn-group-child-padding;
  }
  // 第一个按钮
  > .#{$namespace}-btn-group:last-child:not(:first-child) > .#{$namespace}-btn:first-child {
    padding-left: $--btn-group-child-padding;
  }
}
@include b(btn-group) {
  // 样式
  @include btn-group--layout;
  // 按钮组的基础按钮、span
  > .#{$namespace}-btn, > span > .#{$namespace}-btn {
    &:hover, &:focus, &:active {
      z-index: $--btn-group-hover-zIndex;
    }
    // 禁用的
    &[disabled] {
      z-index: $--btn-group-disabled-zIndex;
    }
  }
  // 只有icon的按钮
  .#{$namespace}-btn-icon-only {
    font-size: $--btn-font-size;
  }
  // 基础按钮
  @include b(btn) {
    // 子元素
    &:only-child {
      border-radius: $--btn-border-radius;
      // 并列基础按钮
      > .#{$namespace}-btn {
        border-radius: $--btn-border-radius;
      }
    }
  }
  // 第一个按钮（不是最后一个）
  > .#{$namespace}-btn:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .#{$namespace}-btn {
    border-top-left-radius: $--btn-border-radius;
    border-bottom-left-radius: $--btn-border-radius;
  }
  // 最后一个按钮（不是第一个）
  > .#{$namespace}-btn:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .#{$namespace}-btn {
    border-top-right-radius: $--btn-border-radius;
    border-bottom-right-radius: $--btn-border-radius;
  }
  // 非第一个、最后一个 按钮
  > .#{$namespace}-btn-group:not(:first-child):not(:last-child) > .#{$namespace}-btn {
    border-radius: $--btn-no-border-radius;
  }
  // 最后一个按钮
  > .#{$namespace}-btn-group:first-child:not(:last-child) > .#{$namespace}-btn:last-child {
    border-top-right-radius: $--btn-no-border-radius;
    border-bottom-right-radius: $--btn-no-border-radius;
  }
  // 第一个按钮
  > .#{$namespace}-btn-group:last-child:not(:first-child) > .#{$namespace}-btn:first-child {
    border-top-left-radius: $--btn-no-border-radius;
    border-bottom-left-radius: $--btn-no-border-radius;
  }
}

// large 按钮组
@mixin btn-group-large--layout {
  //布局
  > span > .#{$namespace}-btn, > .#{$namespace}-btn {
    height: $--btn-large-height;
    padding: $--btn-large-padding;
  }
  // 只有icon的按钮
  .#{$namespace}-btn.#{$namespace}-btn-icon-only {
    width: $--btn-large-height;
    height: $--btn-large-height;
    padding-right: $--btn-group-only-icon-padding;
    padding-left: $--btn-group-only-icon-padding;
  }
}
@include b(btn-group-large) {
  // 样式
  @include btn-group-large--layout;
  > span > .#{$namespace}-btn, > .#{$namespace}-btn  {
    font-size: $--btn-large-font-size;
    border-radius: $--btn-no-border-radius;
  }
}

// small 按钮组
@mixin btn-group-small--layout {
  // 布局
  > span > .#{$namespace}-btn, > .#{$namespace}-btn {
    height: $--btn-small-height;
    padding: $--btn-group-small-padding;
  }
  // small按钮组中的只有icon的按钮
  .#{$namespace}-btn.#{$namespace}-btn-icon-only {
    width: $--btn-small-height;
    height: $--btn-small-height;
    padding-right: $--btn-group-only-icon-padding;
    padding-left: $--btn-group-only-icon-padding;
  }
}
@include b(btn-group-small) {
  // 样式
  @include btn-group-small--layout;
  // 基础按钮
  > span > .#{$namespace}-btn, > .#{$namespace}-btn  {
    font-size: $--btn-font-size;
    border-radius: $--btn-no-border-radius;
    // 图标
    .#{$namespace}icon {
      font-size: $--btn-font-size;
    }
  }
  // 基础按钮子元素
  > .#{$namespace}-btn:only-child {
    border-radius: $--btn-border-radius;
    // 基础按钮
    > .#{$namespace}-btn {
      border-radius: $--btn-border-radius;
    }
  }
  // 第一个子按钮（不是最后一个）
  > .#{$namespace}-btn:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .#{$namespace}-btn {
    border-top-left-radius: $--btn-border-radius;
    border-bottom-left-radius: $--btn-border-radius;
  }
  // 最后一个子按钮（不是第一个）
  > .#{$namespace}-btn:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .#{$namespace}-btn {
    border-top-right-radius: $--btn-border-radius;
    border-bottom-right-radius: $--btn-border-radius;
  }
}